<template lang="pug">
md-table(:titles='titles', :columns='columns', :items='items')
  template(slot='footer')
    ul.pagination
      li.page-item(v-for='page in pages', :class='page === current ? "active" : ""')
        a.page-link(@click='fetch(page)', href='#') {{page}}
</template>

<script>
import axios from 'axios'

export default {
  name: 'pagina-table',
  props: {
    columns: Array,
    titles: Array,
    apiUrl: '',
    type: String
  },
  data() {
    return {
      pages: [],
      current: 0,
      items: []
    }
  },
  created() {
    this.fetch()
  },
  methods: {
    fetch(page = 1) {
      axios.get(process.env.API_URL + this.apiUrl + '?page=' + page)
      .then((response) => {
        this.pages = response.data.pages
        this.current = response.data.current
        this.items = response.data.results
      })
      .catch((error) => console.log(error))
    }
  }
}

</script>
<style lang="scss"></style>
